<template>
  <div class="container">
    <div class="project-container">
      <iframe class="project-video" src="//player.bilibili.com/player.html?aid=808819222&bvid=BV1S34y1y7q8&cid=500511446&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
      <div class="user-detail">
        <img class="user-avatar" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0314%252F94ad46dbj00qpy1do0021d200rs00rsg008t008t.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653310196&t=6992acffcde2e26c429959f076d72270">
        <div class="userinfo">
          <div class="user-level">
            <span style="font-family: AlibabaPuHuiTiM; font-weight: 600; font-size: 13px; color: #F3F3F3; line-height: 20px">LV11</span>
          </div>
          <span class="user_name_detail">也许拜了个拜</span>
          <img src="../assets/netease-cloud-music-fill.png" style="height: 25px; width:25px;filter: drop-shadow(100vw 0px 0 red); position: relative; right: 100vw; justify-self: start; margin: auto" >
          <img src="../assets/b_logo.png" style="height: 20px;width: 20px; justify-self: start; align-self: center">
        </div>
      </div>
      <div class="project-name">
        <span>『FLP』G.E.M.邓紫棋与ILLENIUM的碰撞 | 于是X</span>
      </div>
      <div class="project-tags">
        <div class="tag-item">
          <span style="font-size: 15px; font-weight: 600; color: #3D3D3D; line-height: 30px">FLP</span>
        </div>
        <div class="tag-item">
          <span style="font-size: 15px; font-weight: 600; color: #3D3D3D;line-height: 30px">邓紫棋</span>
        </div>
      </div>
      <div class="project-intro">
        <span style="font-family: AlibabaPuHuiTiM;color: #9F9F9F; margin-left: 10px">
          邓紫棋 VS ILLENIUM
          afterlife remake 碰上邓紫棋的于是会碰撞出怎样的火花呢
          求三连：）
        </span>
      </div>
      <div class="project-download" @click="toDownload">
        <img src="../assets/download.png" style="height: 40px; width: 40px; margin-top: 10px">
      </div>
    </div>
  </div>

</template>

<style scoped>
  .container {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .project-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 400px 90px 40px 40px 100px 100px;
    width: 720px;
    height: auto;
    border-radius: 7px;
    box-sizing: border-box;
    /*border: 1px solid #C5C2C2;*/
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    grid-column-start: 2;
    grid-column-end: 4;
  }
  .project-video {
    /* 矩形 101 */

    width: 95%;
    margin: auto;
    height: 95%;
    background: #000000;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .user-detail {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 50px 1fr;
    width: 95%;
    margin: auto;
  }
  .user-avatar {
    width: 50px;
    height: 50px;
    border-radius:50%;
    border: solid 1px #e6e6e6;
    overflow:hidden;
  }
  .userinfo {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 50px 1fr;
    grid-column-start: 2;
    grid-column-end: 3;

  }
  .user-level {
    display: inline-block;
    margin-left: 5px;
    width: 40px;
    height: 20px;
    line-height: 20px;
    align-self: center;
    border-radius: 35px;
    background: #D8D8D8;
    text-align: center;
  }
  .user_name_detail {
    font-family: AlibabaPuHuiTiM;
    font-size: 18px;
    font-weight: 800;
    line-height: 20px;
    letter-spacing: 0em;
    justify-self: center;
    align-self: center;
    justify-self: start;
  }
  .project-name {
    font-family: AlibabaPuHuiTiM;
    font-size: 18px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: 0em;
    color: #3D3D3D;
    justify-self: start;
    margin-left: 10px;
    align-self: center;
  }
  .tag-item {
    /* 矩形 103 */
    width: 50px;
    height: 30px;
    border-radius: 69px;
    background: #D8D8D8;
    text-align: center;
    margin-left: 5px;
    display: inline-block;
  }
  .project-tags {
    align-self: center;
    margin-left: 10px;
  }
  .project-intro {
    align-self: center;
    justify-self: start;
    margin-left: 10px;

  }
  .project-download {
    width: 140px;
    height: 65px;
    border-radius: 110px;
    background: #8F8F8F;
    margin-left: 5px;
    text-align: center;
    margin-left: 20px;
  }
</style>
<script>
export default {
  name: 'ProjectDetail',
  components: {},

  data () {
    return {
      project: {
        bizhan: 'https://www.bilibili.com',
        id: '',
        name: '',
        description: '',
        status: '',
        created_at: '',
        updated_at: '',
        user: {
          id: '',
          name: '',
          email: '',
          created_at: '',
          updated_at: ''
        }
      }
    }
  },
  mounted() {

  },
  created () {
    this.getProject()
  },
  methods: {
    getProject () {
      this.$http.get('/api/projects/' + this.$route.params.id).then(response => {
        this.project = response.data
      })
    },
    toDownload: function(e) {
      this.$router.push("/downloadDetail");
    }
  }
}
</script>